export const code = `<script setup>
/*
* 若有<Badge dot>，则展示点
* 若有text，例如 <Badge text="999+">，则展示文字
* 若有<template #content>，则展示自定义内容*/

const props = defineProps({
  text: {
    type: String,
    default: ""
  },
  dot:{
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <div class="badge-wrapper">
    <div class="badge badge-dot" v-if="props.dot"></div>
    <div class="badge badge-content" v-else-if="!props.text">
      <slot name="content"></slot>
    </div>
    <div class="badge badge-text" >{{props.text}}</div>
    <slot></slot>
  </div>
</template>

<style scoped>
.badge-wrapper {
  position: relative;
  margin-top: 9px;
  display: inline-block;
}

.badge{
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  background-color: #ff0000;
  color: #fff;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.badge-text {
  border-radius: 20px;
  font-size: 10px;
  padding: 2px;
  line-height: 10px;
}

.badge-content {
  border-radius: 20px;
  font-size: 12px;
  height: 14px;
  width: 14px;
  line-height: 14px;
  text-align: center;
}
</style>`